{extend name="public:base" /}
{block name="title"}{$site_title}{/block}
{block name="content"}
<!--/sidebar-->
<div class="main-wrap">
    <div class="crumb-wrap">
        <div class="crumb-list">
            <i class="icon-font"></i>
            <a href="/baibu/admin/Index">首页</a>
            <span class="crumb-step">&gt;</span>
            <a class="crumb-name" href="/baibu/admin/Product/">产品管理</a>
            <span class="crumb-step">&gt;</span>
            <a class="crumb-name" href="/baibu/admin/Product/category">分类列表</a>
            <span class="crumb-step">&gt;</span>
            <span>{$nav}</span>
        </div>
    </div>
    <div class="result-wrap">
        <div class="result-content">
            <form action="{$url}" method="post" id="myform" name="myform" enctype="multipart/form-data">
                <table class="insert-tab" width="100%">
                    <tbody><tr>
                        <th width="120">
                            <i class="require-red">*</i>分类名称：
                        </th>
                        <td>
                            <input class="common-text required" name="cate_name" size="50" value="{$info.cate_name|default=''}" type="text">
                        </td>
                    </tr>
                    <tr>
                        <th>分类说明：</th>
                        <td>
                            <textarea name="cate_remark" class="common-textarea" cols="30" style="width: 80%;margin-top: 2%;"  rows="10">{$info.cate_remark|default=''}</textarea>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            <i class="require-red">*</i>上级分类：
                        </th>
                        <td>
                            <select name="cate_pid" style="width:150px;height: 30px;border: 1px #ccc solid;border-radius: 5px;padding: 4px;font-size: 14px;font-family:'Arial';background: #fff;color: #555;box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);">

                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th>状态：</th>
                        <td>
                            {if isset($info.cate_status)}
                            <input class="mui-switch mui-switch-anim" type="checkbox" {if $info.cate_status ==1}checked{/if}>
                            {else /}
                            <input class="mui-switch mui-switch-anim" type="checkbox" >
                            {/if}
                            <input class="s" type="hidden" value="{$info.cate_status|default=''}" name="cate_status">
                            <input  type="hidden" value="{$info.cate_id|default=''}" name="cate_id">
                        </td>
                    </tr>
                    <tr>
                        <th></th>
                        <td>
                            <input id="sub" class="btn btn-primary btn6 mr10" value="提交" type="button">
                            <input class="btn btn6" onclick="history.go(-1)" value="返回" type="button">
                        </td>
                    </tr>
                    </tbody>
                </table>
            </form>
            <label id="cate" hidden>{$cate}</label>
            <input class="pid"  type="hidden" value="{$info.cate_pid|default=''}">
        </div>
    </div>
</div>
<!--/main-->
{/block}
{block name="js"}
<script>
    $(function () {
        var cate_id = $('.pid').val();
        //获取option字符串
        var cate = $("#cate").html();
        //option字符串转对象
        var cate_info = JSON.parse(cate);
        //获取option选项
        function opList(arr,pre,cate_id) {
            var str ='';
            $.each(arr,function (i,item) {
                if(cate_id){
                    var atr = '';
                    //判断分类id是否相等
                    if(cate_id == item.cate_id){
                        //相等默认选中
                        atr = ' selected';
                    }
                    str += '<option value="'+item.cate_id+'" '+atr+'>'+pre+item.cate_name+'</option>';
                }else{
                    str += '<option value="'+item.cate_id+'">'+pre+item.cate_name+'</option>';
                }
                //子类是否存在
                if(item.child){
                    var temp = '&nbsp;';
                    for(var i = 0;i<item.level;i++){
                        temp += temp;
                    }
                    //递归调用本身在进行判断
                    str += opList(item.child,temp+'|-',cate_id);
                }
            });
            return str;
        }
        //默认显示
        var html = '<option value="0">顶级分类</option>';
        var cate_list = '';
        if(cate_info) {
            cate_list = opList(cate_info, '',cate_id);
        }
        //option渲染
        html = html + cate_list;

        $('select[name=cate_pid]').append(html);
        if(!$('.s').val()){
            $('.s').val(0);
        }
        $('.mui-switch-anim').click(function () {
            if($(this).prop("checked")){
                $('.s').val(1);
            }else{
                $('.s').val(0);
            }
        });

        $('#sub').click(function(){
            if($('input[name=article_cate_name]').val() == ''){
                layer.msg('分类不能为空', {icon: 5,time:1200});
                return;
            }
            if($('select[name=article_cate_pid]').val() == ''){
                layer.msg('上级分类不能为空', {icon: 5,time:1200});
                return;
            }

            var url = $('form').attr('action');
            $.ajax({
                url : url,
                dataType : "json",
                type : "post",
                data : $('form').serialize(),
                success :function (data) {
                    if(data.status){
                        layer.msg(data.msg,{icon:1,time:1200,end:function () {
                                location.href=data.data;
                            }});
                    }else{
                        layer.msg(data.msg,{icon:5,time:1200});
                    }
                }
            });
        });
    });
</script>
{/block}